<template>
  <div class="app">
    <myNavbar title="共享分润兑换分额"></myNavbar>
    <div class="cashier-picture">
      <image  class="cashier-picture-iamge" src="http://cdnx.365.rzico.com/10200/upload/20211208/b529be46-5428-4b3a-846e-04aa0894f932.jpg"></image>
    </div>
    <div class="information">
      <div class="information-left">
        <div>
          <image class="information-image" :src="user.avatar"></image>
        </div>
        <div >
          <text class="information-image-text">{{user.name}}</text>
        </div>
      </div>
      <div  class="information-right">
        <div class="information-share">
          <text class="information-share-text">份额:{{stockRight}}份</text>
        </div>
        <div class="information-certificate">
          <text class="information-certificate-text">兑换券:{{groupBuy}}</text>
        </div>
      </div>
    </div>
    <div class="rule">
      <div class="rule-title-div center">
        <text class="rule-title-text">兑换规则</text>
      </div>
      <div class="rule-contain-div center">
        <text class="rule-contain-text">每500兑换券可以兑换一份共享分润权益。</text>
      </div>
    </div>
    <div class="paymentAmount">
      <div class="paymentAmount-input-div">
        <input class="cash-center-input cash-center-input" v-model="shareAmount" name="input" type="number" :maxlength="maxlength"   placeholder="请输入分润份额" />
      </div>
    </div>
    <div class="confirmExchange" @click="exchangeClick">
      <div class="confirmExchange-wrap">
        <text class="confirmExchange-text">确认兑换</text>
      </div>
    </div>
    <div class="confirmExchange" @click="toSharedProfitDetails">
      <div class="confirmExchange-wrap">
        <text class="confirmExchange-text">查看分润记录</text>
      </div>
    </div>
  </div>

</template>
<script>
import myNavbar from "./components/myNavbar/myNavbar.vue";
import {getInfo} from "../../../api/member.js";
import { exchangeStock } from "../../../api/cardBill.js";

export default {
  name: "shareProfit.vue",
  data() {
    return {
      profitShare:"",
      user:{},
      groupBuy:'0',
      shareAmount:'',
      stockRight:'0'
    };
  },
  components: {
    myNavbar
  },
  created() {
    console.log(app.config.params)
    this.getUser()
  },
  methods: {
    exchangeClick(){
      if(this.shareAmount == ''){
        eeui.toast('请输入分润份额')
        return;
      }
      let params = {
        cardType:2,
        stockRight: this.shareAmount
      }
      exchangeStock(params).then(res=>{
        eeui.toast('兑换成功')
        console.warn(res)
        this.getUser()
      })
    },
    getUser() {
      var _this = this
      getInfo().then(response => {
        this.user = response.data.member;
        if (this.user.avatar == null){
          this.haveAvatar = false
          this.user.avatar=''
        }else {
          this.user.avatar = this.thumbnail(this.user.avatar,180,180)
        }
        _this.user.code= this.user.username.substr(this.user.username.lastIndexOf("10200_") + 6,this.user.username.length);
        _this.groupBuy = parseInt(response.data.groupBuy)
        _this.stockRight = response.data.member.stockRight
        console.warn("getInfogetInfogetInfogetInfogetInfo")

      }).catch(error => {

      })
    },
    toSharedProfitDetails(){

      eeui.openPage({
        url: "root://pages/member/shareProfit/sharedProfitRecord.js",
        statusBarType: "immersion",
        statusBarStyle: false
      });

    }

  }

}
</script>
<style scoped>
.app {
  flex: 1;
  background-color: rgb(248, 248, 248);
}
.cashier-picture{
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 750px;
}
.cashier-picture-iamge{
  width: 750px;
  height:300px
}

.paymentAmount{
  width: 750px;
}
.paymentAmount-input-div{
  box-sizing: border-box;
  margin-top: 50px;
  display: flex;
  flex-direction: row;
  width: 700px;
  margin-left: 25px;
  background-color: white;
  padding-left: 50px;
  padding-top: 40px;
  padding-bottom: 40px;
  border-radius: 16px;
}

.paymentAmount-input-contain{
  margin-left:20px;
}

.information-image{
  width: 80px;
  height: 80px;
  border-radius: 50px;
}

.information{
  height: 170px;
  width: 750px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: white;
}

.information-left{
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 50px;
}

.information-right{
  padding-right: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.information-image-text{
  margin-left: 20px;
  font-size: 32px;
}

.rule{
  width: 750px;
}

.rule-title-text{
  padding-top: 30px;
  margin-left: 50px;
  font-size: 32px;
  color: red;
}
.rule-contain-text{
  font-size: 32px;
  color: red;
  margin-left: 120px;
}
.rule-contain-div{
  height: 100px;
}
.rule-title-div{
  height: 100px;
}
.center{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.confirmExchange{
  margin-top: 100px;
  width: 750px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.confirmExchange-wrap{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width:300px;
  height: 100px;
  background-color:#ff8400;
  border-radius: 50px;
}
.confirmExchange-text{
  color: white;
  font-size:32px;
}
.information-certificate{
  margin-top: 10px;
}
.information-share-text{
  font-size: 30px;
}
.information-certificate-text{
  font-size: 30px;
}

.cash-center-input {
  background-color: #fff;
  flex: 1;
  min-height: 65px;
}

</style>







